import IndexStore, { newsStore } from '@/stores/newsStore';
import { observer } from 'mobx-react';
import styles from './index.less';
import { Row, Col, Image } from 'antd';

import React from 'react';
import { history } from 'umi';
import Header from '@/pages/components/header';
import Footer from '@/pages/components/footer';



/**
 * 详情页Props成员
 */
interface InfoPageProps {
  indexStore: IndexStore;
}

/**
 * 详情页组件
 */

@observer
export default class InfoPage extends React.Component<InfoPageProps> {
  componentDidMount() {
    // console.log();

    if (!history.location.query) {
      return;
    }
    const id = history.location.query['id'];
    console.log(id);

    if (!id) {
      return;
    }
    newsStore.infoNews(id);
  }
  render() {
    return (
      <div>
        <Header />
        <div className={styles.content_container}>
          <div className={styles.now_devider}></div>
          <div className={styles.now_box}>
            <div className={styles.title_top}>最新资讯</div>
            <Row className={styles.now_container}>
              <Col span={10} className={styles.now_pic}>
                <div className={styles.now_pic_img} >
                  <Image src={newsStore.imageURL + newsStore.newsInfo?.cover} />
                </div>
              </Col>
              <Col span={14} style={{ marginTop: 'auto', marginBottom: 'auto', paddingLeft: '10px' }}>
                <div className={styles.now_title}>标题：{newsStore.newsInfo?.title}</div>
                <div className={styles.now_tips}>组织机构：{newsStore.newsInfo?.organizer}</div>
                <div className={styles.now_tips}>展览场地：{newsStore.newsInfo?.exhibitionArea}</div>
                <div className={styles.now_tips}>开始时间：{newsStore.newsInfo?.startTime}</div>
                <div className={styles.now_tips}>结束时间：{newsStore.newsInfo?.endTime}</div>
                <div className={styles.now_tips}>新闻资讯：{newsStore.newsInfo?.content}</div>
              </Col>
            </Row>
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}
